<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马面面</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-container>
        <!-- 头部-->
        <el-header class="el-header">
            <el-container>
                <div>
                    <el-image src="img/export.png" class="header-img"></el-image>
                </div>
                <el-menu
                        default-active="1"
                        mode="horizontal"
                        background-color="#545c64"
                        text-color="white"
                        active-text-color="#ffd04b"
                        style="margin-left: auto;">
                    <el-submenu index="2">
                        <template slot="title">
                            <el-avatar> {{username}}</el-avatar>
                        </template>
                        <el-menu-item index="2-1">修改密码</el-menu-item>
                        <el-menu-item index="2-2">用户中心</el-menu-item>
                        <el-menu-item index="2-3" @click="logout()">退出</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3">
                        <el-link @click="jump('welcome')">首页</el-link>
                    </el-menu-item>
                </el-menu>
            </el-container>
        </el-header>

        <!-- 中间部分 -->
        <el-container style="height: 580px; border: 1px solid #eee">
            <!-- 侧边栏 -->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu>
                    <el-submenu index="1" >
                        <template slot="title"><i class="el-icon-menu"></i>平台系统管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="jump('dept')"><i class="el-icon-help"></i>部门管理
                            </el-menu-item>
                            <el-menu-item index="1-2" @click="jump('user')"><i class="el-icon-help"></i>用户管理
                            </el-menu-item>
                            <el-menu-item index="1-3" @click="jump('role')"><i class="el-icon-help"></i>角色管理
                            </el-menu-item>
                            <el-menu-item index="1-4" @click="jump('module')"><i class="el-icon-help"></i>模块管理
                            </el-menu-item>
                            <el-menu-item index="1-5" @click="jump('log')"><i class="el-icon-help"></i>操作日志
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>题库管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="jump('course')"><i class="el-icon-help"></i>学科管理
                            </el-menu-item>
                            <el-menu-item index="2-2" @click="jump('catalog')"><i class="el-icon-help"></i>题目类型
                            </el-menu-item>
                            <el-menu-item index="2-3" @click="jump('company')"><i class="el-icon-help"></i>企业管理
                            </el-menu-item>
                            <el-menu-item index="2-4" @click="jump('question')"><i class="el-icon-help"></i>题目管理
                            </el-menu-item>
                            <el-menu-item index="2-5" @click="jump('audit')"><i class="el-icon-help"></i>审核日志
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-menu"></i>会员管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1" @click="jump('member')"><i class="el-icon-help"></i>会员账号
                            </el-menu-item>
                            <el-menu-item index="3-2" @click="jump('exam')"><i class="el-icon-help"></i>会员答题
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <!-- 主区域部分 -->
                <el-main>
                    <iframe :src="iframeSrc" frameborder="false"
                            style="top:80px;left: 120px; width: 100%;height:500px;border: 0px;"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            iframeSrc: "welcome.html",
            username: ""
        },
        mounted() {

            this.findUsername();
        },
        methods: {
            findUsername() {
                axios.get("userServlet?method=findUsername").then(resp => {
                    this.username = resp.data.resultData;
                });
            },
            jump(href) {
                this.iframeSrc = href + ".html";
            },
            logout() {
                location.href = "userServlet?method=logout";
            },
            /*logout() {
                axios.get("userServlet?method=logoutTwo")
                    .then((resp) => {
                        if (resp.data.flag) {
                            location.href = resp.data.resultData;
                        } else {
                            location.href = resp.data.resultData;
                        }
                    }).catch(() => {
                        this.$message.error("请求错误!")
                })
            }*/
            findAll () {
                axios.get("moduleServlet?method=findAll")
                    .then((resp)=>{
                        if (resp.data.flag){

                        }else {
                            this.$message.error(resp.data.message);
                        }
                    })
                    .catch(()=>{
                        this.$message.error("请求错误!");
                    })
            },
            beforeUpload(file) {
                const isJPGorPng = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt1M = file.size / 1024 / 1024 < 1;
                if (!isJPGorPng) {
                    this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
                }
                if (!isLt1M) {
                    this.$message.error('上传图片大小不能超过 1MB!')
                }
                return isJPGorPng && isLt1M;
            },
            uploadSuccess(res) {
                if (res.flag) {
                    this.form.picture = res.fileName;
                } else {
                    this.$message.error("上传失败");
                }

            }
        }
    });
</script>
</html>